<template>
   <div>
     <div class="hotel-main">
       <div class="h-title">订酒店</div>
       <div class="select-hotel">
         <el-form :inline="true">
           <el-form-item>
             <el-input v-model="selectHotel.destination" placeholder="输入目的地"></el-input>
           </el-form-item>
           <el-form-item prop="selectHotel.inDate">
             <el-date-picker type="date" placeholder="选择入住日期" v-model="selectHotel.inDate" style="width: 100%;"></el-date-picker>
           </el-form-item>
           <el-form-item prop="selectHotel.outDate">
             <el-date-picker type="date" placeholder="选择离开日期" v-model="selectHotel.outDate " style="width: 100%;"></el-date-picker>
           </el-form-item>
           <el-form-item>
             <el-input v-model="selectHotel.peopleCount" placeholder="不确定人数"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="warning"><i class="fa fa-search" aria-hidden="true"></i></el-button>
           </el-form-item>
         </el-form>
       </div>
       <div class="text">
         <ul>
           <li>
             <i class="notice01"></i>
             <div class="flt1">
               <h2>住宿攻略</h2>
               <p>区域攻略到特色主题，应有尽有</p>
             </div>
           </li>
           <li>
             <i class="notice02"></i>
             <div class="flt1">
               <h2>专享价格</h2>
               <p>多平台价格对比，天天专享特惠</p>
             </div>
           </li>
           <li>
             <i class="notice03"></i>
             <div class="flt1">
               <h2>真实点评</h2>
               <p>超过100万真实用户点评和游记</p>
             </div>
           </li>
         </ul>
       </div>
       <div class="h-title" style="margin-top: 50px; text-align: center">主题住宿</div>
       <div class="introduce">
         <el-menu
           class="el-menu-demo"
           mode="horizontal"
           text-color="black"
           active-text-color="#ffd04b"
           :router="true"
           default-active="diving"
           >
           <el-menu-item index="diving" style="font-size: 20px">潜水胜地</el-menu-item>
           <el-menu-item index="history" style="font-size: 20px">朝拜历史</el-menu-item>
           <el-menu-item index="eating" style="font-size: 20px">吃货根据地</el-menu-item>
           <el-menu-item index="cheaptHotel" style="font-size: 20px">超值酒店</el-menu-item>
           <el-menu-item index="weekday" style="font-size: 20px">周末好去处</el-menu-item>
           <el-menu-item index="fairy" style="font-size: 20px">童话小镇</el-menu-item>
         </el-menu>
       </div>
       <div>
         <hotel-recommend></hotel-recommend>
       </div>
     </div>
   </div>


</template>

<script>

  import {hotelRecommend} from "../component";

  export default {
        name: "hotel",
      data:function(){
        return{
          selectHotel:{
            destination:'',
            inDate:'',
            outDate:'',
            peopleCount:''
          }
        }
      },
      components:{

          hotelRecommend
      }
    }
</script>

<style scoped>
  .h-title{
    position: relative;
    left: 18%;
    font-size: 24px;
    color: #333;
    line-height: 30px;
    margin-top: 60px;
    width: 1000px;
    height: 30px;
    text-align: left;
  }
  .select-hotel{
    margin-top: 80px;
  }
  .el-input__inner{
    border: 1px solid black;
  }
  li+li{
    margin-left: 120px;
  }
  li{
    display:inline-block;
    color: #666;
  }
  .el-menu{
    padding-left:25%;
  }
  .introduce{
    margin-top: 30px;
  }
  .text{
    margin-top: 100px;
  }
  .el-input__inner:hover{
    border-color: yellow;
  }
</style>
